import React from 'react';
import { connect } from 'dva';
import { Tree, Button, Table, Form, Input, Popconfirm } from 'antd';
import TRoomModal from '../../components/basic/TRoomModal';
const TreeNode = Tree.TreeNode;
const FormItem = Form.Item;

function TRoom({ dispatch, tRoom, loading, form }) {

  const { getFieldDecorator, getFieldsValue,getFieldValue } = form;

  const columns = [{
    title: '机房名称',
    dataIndex: 'name',
    key: 'name',
    width: 150,
  },{
    title: '机房编码',
    dataIndex: 'code',
    key: 'code',
    width: 150,
  }, {
    title: '联系人',
    dataIndex: 'contacts',
    key: 'contacts',
    width: 100,
  }, {
    title: '联系方式',
    dataIndex: 'contactsPhone',
    key: 'contactsPhone',
    width: 100,
  },{ 
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 150
  },{
    title: '操作',
    key: 'operation',
    width: 120,
    render: (text, record) => (
        <span>
            <TRoomModal title="编辑机房" record={record} dataCenterList={tRoom.dataCenterList}  onOk={editHandler.bind(null, record.id_)}>
            <a>编辑</a>
            </TRoomModal>
            <span className="ant-divider" />
            <Popconfirm title="确认删除？" onConfirm={deleteHandler.bind(null, record.id_)}>
            <a>删除</a>
            </Popconfirm>
        </span>
    ),
  }];

  const pagination = {
    current:tRoom.current,
    pageSize:tRoom.currentSize,
    total: tRoom.total,
    showSizeChanger: true,
    showTotal: (total => '共' + tRoom.total + '条'),
    onShowSizeChange(current, size) {
      dispatch({
        type: 'tRoom/queryAssetModel',
        payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':size} },
      });
    },
    onChange(current) {
      dispatch({
        type: 'tRoom/queryTRoom',
        payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':tRoom.currentSize} },
      });
    },
  };

  const onSelect = (keys) => {
     if(keys.length > 0){
      dispatch({
          type: 'tRoom/queryTRoom',
          payload: { ...getFieldsValue(),...{'datacenterId':keys[0]} },
      });
     }else{
       dispatch({
          type: 'tRoom/queryTRoom',
          payload: { ...getFieldsValue(),...{'datacenterId':null} },
       });
     }
  }

  const loop = data => data.map((item) => {
       return <TreeNode key={item.id_} title={item.name} />;
  });

  const submitHandle = () => {
    dispatch({
        type: 'tRoom/queryTRoom',
        payload: { ...getFieldsValue() },
    });
  }

  const createHandler = (values) => {
    dispatch({
      type: 'tRoom/create',
      payload: values,
      search:{...getFieldsValue()},
    });
  }

  const editHandler = (id, values) => {
    dispatch({
      type: 'tRoom/edit',
      payload: { id, ...values },
      search:{...getFieldsValue(),...{'pageNum':tRoom.current, 'pageSize':tRoom.currentSize}},
    });
  }

  function deleteHandler(id) {
    dispatch({
      type: 'tRoom/remove',
      payload: id,
      search:{...getFieldsValue(),...{'pageNum':tRoom.current, 'pageSize':tRoom.currentSize}},
    });
  }


  return (
    <div style={{backgroundColor:'#fff'}}>
      <div style={{width:'250px',float: "left"}}>
        <div style={{width:'100%',backgroundColor:'#232f40',lineHeight:'40px',color:'#fff',paddingLeft:'20px',fontSize:'14px',fontWeight:'400'}}>
          数据中心
        </div>
        <div style={{width:'100%',}}>
            <Tree
                onSelect={onSelect}
            >
                 { tRoom.dataCenterList && loop(tRoom.dataCenterList) }
            </Tree>
        </div>
      </div>
      <div style={{minHeight:'100%',marginLeft:'250px'}}>
        <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'40px',paddingLeft:'20px',paddingTop:'10px'}}>
          <Form layout="inline" >
            <FormItem>
              {getFieldDecorator('datacenterId',{initialValue:tRoom.datacenterId})(
                <Input type="hidden" />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('name',{initialValue:''})(
                <Input type="text" placeholder="机房名称" style={{ width:'200px', marginRight: '3%' }} />
              )}
            </FormItem>
            <FormItem>
              <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
            </FormItem>
            <div style={{marginTop:'-40px',textAlign:'right',paddingRight:'10px'}}>
              <FormItem>
                <TRoomModal title="新增机房" record={{}} currentDatacenterId={getFieldValue('datacenterId')}  dataCenterList={tRoom.dataCenterList} onOk={createHandler}>
                  <Button type="primary" size='large'>新增机房</Button>
                </TRoomModal>
              </FormItem>
            </div>
         </Form>
        </div>
        <div style={{width:'100%',padding:"20px 20px",}}>
          <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={tRoom.tRoomList} pagination={pagination}
          />
        </div>
      </div>
    </div>
  );
}

function mapStateToProps(state) {
  return { tRoom : state.tRoom,loading:state.loading.models.tRoom};
}

TRoom = Form.create()(TRoom);

export default connect(mapStateToProps)(TRoom);
